<template>
  <div id="dialog">
    <van-nav-bar
      class="nav_bar"
      :title="'和'+othsdInfo.realname+'聊天中'"
      left-text="返回"
      right-text="更多"
      left-arrow
      @click-left="onClickLeft"
      @click-right="showAction = true"
    />
    <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text="下拉可加载..." loosing-text="释放并加载..."> -->

    <van-actionsheet v-model="showAction" :actions="actions"  cancel-text="取消"/>
    <div id="listcontent">
      <div style="height:55px"></div>
      <div id="listitem" v-for="item in messages" :key="item">
        <van-row type="flex" justify="center" style="background:#f8f8f8">
          <van-col span="5" style="color:grey">{{item.createTime||''}}</van-col>
        </van-row>
        <van-row class="otherItem item" type="flex" justify="start" v-if="item.receiver==$store.state.user.id">
          <van-col span="4" ><img class="avatar" :src="othsdInfo.avatar" alt=""></van-col>
          <van-col span="15">
            <div class="content">{{item.content}}</div>
          </van-col>

        </van-row>
        <van-row class="myItem item" type="flex" justify="end" v-if="item.sender==$store.state.user.id">
          <van-col span="15">
            <div class="content">{{item.content}}</div>
          </van-col>
          <van-col span="4"><img class="avatar" :src="$store.state.user.avatar" alt=""></van-col>

        </van-row>
      </div>
      <div style="height:60px"></div>
    </div>
    <!-- </van-pull-refresh> -->
    <van-row type="flex" class="input_message">
      <van-field
        v-model="sendContent"
        center
        clearable
        placeholder="请输入消息内容..."
      >
        <van-button slot="button" size="small" type="primary" @click="send()" style="color: #fff;background-color: #38f;border: 1px solid #38f;">发送</van-button>
      </van-field>
    </van-row>
  </div>
</template>

<script>
import Config from './project.config.js'
export default {
  data(){
    return{
      isLoading:false,
      showAction:false,
       actions: [
        {
          name: '举报',
          callback: this.jubao
        },

      ],
      messages:[],
      page:1,
      sendContent:'',
      othsdInfo: ''
    }
  },
  methods:{
    fullfillTwo(str){
      str=str.toString();
      if(str.length<2){
          str='0'+ str;
      }
      return str;
    },
    send:function(){
      if(this.sendContent.length>140||this.sendContent.length==0){
        this.$toast('请输入140字以内~并且不能为空哦');
      }else{
        this.$http.post(
          Config.baseUrl+'/api/message/private',
          {
            type: 'PRIVATE_MESSAGE',
            creator: this.$store.state.user.id,
            receiver: this.$route.params.id,
            objectId: 0,
            content: this.sendContent
          },
          {
            emulateJSON:false
          }
        ).then(function(rsp){
          console.log(rsp)
          if(rsp.data.code==1){
            var date = new Date()
            this.messages.push({
              content:this.sendContent,
              createTime:(this.fullfillTwo(date.getMonth()+1))+'-'+this.fullfillTwo(date.getDate())+' '+this.fullfillTwo(date.getHours())+':'+this.fullfillTwo(date.getMinutes()),
              receiver:this.$route.params.id,
              sender:this.$store.state.user.id
            })
            this.$toast({duration:1000,message:'消息发送成功~'})
            this.sendContent = ''
            this.$nextTick(function(){
              console.log('添加消息向下滑动')
              var content = document.getElementById('listcontent')
              content.scrollTop = content.scrollHeight
            })

          }else{
            this.$toast(rsp.data.message)
          }
        },function(error){
          console.log(error)
        })
      }
    },
    jubao:function(){
      this.$http.post(Config.baseUrl+'/api/message/report/'+this.$route.params.id).then(function(rsp){
        if(rsp.data.code == 1 ){
          this.$toast('举报成功~')
        }else{
           this.$toast('举报失败，错误信息:'+rsp.data.message)
        }
      },function(){
        this.$toast('举报失败')
      })
    },
    onRefresh:function(){

    },
    onClickLeft:function(){
      this.$router.go(-1)
    },
    getOthsdInfo(id){
      let _this = this
      console.log(this,_this)
      this.$http.get(Config.baseUrl + '/api/user/'+ id ).then(function(rsp,_this){
        if(rsp.data.code == 1){
          this.othsdInfo = rsp.data.data
        }else{
          console.log(_this)
          this.$toast('获取聊天信息失败！即将返回')
          setTimeout(function(){
            this.$router.go(-1)
          },1500,_this)
        }
      },function(error){
        console.error(error)
        this.$toast('获取聊天信息失败！即将返回')
          setTimeout(function(_this){
            _this.$router.go(-1)
          },1500,_this)
      })
    }

  },
  mounted:function(){
    this.$store.commit('hideTab')
    // console.log(this.$route.params.id)
    this.getOthsdInfo(this.$route.params.id)
    this.$http.get(Config.baseUrl+'/api/message/private/'+this.$route.params.id+'/'+this.page).then(function(rsp){
      // console.log(rsp)
      try{
        this.messages = rsp.data.data.reverse()
      }catch(exception){
        console.error(exception)
      }
      console.log('得到message之后',this.messages,'当前用户id',this.$store.state.user.id)
      this.$nextTick(function(){
        var content = document.getElementById('listcontent')
        content.scrollTop = content.scrollHeight
        // content.addEventListener('scroll',function(event){
        //   console.log(event,content.scrollTop)
        // })
      })
    },function(error){
      console.log(error)
    })


    // 登录成功订阅消息接口
    var goEasy = new GoEasy({
      appkey: 'BC-e6ef4c2f42b84bad9f8d3f8ecb100b1a'
    });
    var _this = this
    goEasy.subscribe({
      channel:'channel_'+_this.$store.state.user.id,
      onMessage: function(message){
      var content = JSON.parse(message.content)
      console.log(JSON.parse(message.content))
      if(content.creator == _this.$route.params.id){
        _this.messages.push(content)
        _this.$nextTick(function(){
              console.log('收到消息向下滑动')
              var content = document.getElementById('listcontent')
              content.scrollTop = content.scrollHeight
            })
      }
      }
    });
    console.log('成功订阅信道 id:' + 'channel_'+this.$store.state.user.id)

    //订阅信道结束
  }
}
</script>

<style lang="stylus" scoped>
.nav_bar{
  position fixed
  top 0
  width 100%
}
.input_message{
  position fixed
  bottom 0
  width 100%
}
.avatar{
  padding 8px 8px
  height 44px
  width 44px
  border-radius  100%
}
.otherItem{
  // background pink
}

.otherItem .content{
  border-top-left-radius 0
}
.otherItem .content:before{
  // content:''
  // position: absolute;
  // border-width: 10px 0px 0 10px;
  // border-style: solid;
  //   border-color: #fff transparent;
  //   -webkit-transition: all .25s;
  //      -moz-transition: all .25s;
  //       -ms-transition: all .25s;
  //        -o-transition: all .25s;
  //           transition: all .25s;
  // -webkit-transform: rotate(-270deg);
  //    -moz-transform: rotate(-270deg);
  //     -ms-transform: rotate(-270deg);
  //      -o-transform: rotate(-270deg);
  //         transform: rotate(-270deg);
  // left 65px
  // top 8px

}
.myItem{
  // background green
}
.item{
  min-height 60px
}
.item .content{
  color white
  background-color  rgba(51, 136, 255, 0.7)
  font-size 1.1rem
  margin 8px
  min-height 1.3rem
  border-radius 6px
  padding 12px 10px

  box-shadow: 1px 1px 5px #cccccc;
}
#listcontent{
  height 100%
  overflow-y: scroll

}

</style>

